<template>
  <div>
    <el-row class="m-0">
      <el-divider>金证书</el-divider>
      <div
        class="text-center"
        v-if="certificates.gold == null || certificates.gold.length == 0"
      >
        暂时还未获得证书
      </div>
      <el-col
        :span="6"
        v-if="certificates.gold.length != 0"
        v-for="(cer, index) in certificates.gold"
        :key="index"
      >
        <el-card class="fl text-center m-t-10 m-r-10">
          <el-image :src="cer.certificateImage" style="width: auto">
            <div slot="placeholder" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </el-image>
          <el-button type="text" @click="getmedallist(cer.routeId,cer.routeName)">{{
            cer.routeName
          }}</el-button>
        </el-card>
        <div class="clearfix"></div>
      </el-col>
    </el-row>
    <el-row class="m-0">
      <el-divider>银证书</el-divider>
      <div
        class="text-center"
        v-if="certificates.sliver == null || certificates.sliver.length == 0"
      >
        暂时还未获得证书
      </div>
      <el-col
        :span="6"
        v-if="certificates.sliver.length != 0"
        v-for="(cer, index) in certificates.sliver"
        :key="index"
      >
        <el-card class="fl text-center m-t-10 m-r-10">
          <el-image :src="cer.certificateImage" style="width: auto">
            <div slot="placeholder" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </el-image>
          <el-button type="text" @click="getmedallist(cer.routeId,cer.routeName)">{{
            cer.routeName
          }}</el-button>
        </el-card>
        <div class="clearfix"></div>
      </el-col>
    </el-row>
    <el-row class="m-0">
      <el-divider>铜证书</el-divider>
      <div
        class="text-center"
        v-if="certificates.copper == null || certificates.copper.length == 0"
      >
        暂时还未获得证书
      </div>
      <el-col
        :span="6"
        v-if="certificates.copper.length != 0"
        v-for="(cer, index) in certificates.copper"
        :key="index"
      >
        <el-card class="fl text-center m-t-10 m-r-10">
          <el-image :src="cer.certificateImage" style="width: auto">
            <div slot="placeholder" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </el-image>
          <el-button type="text" @click="getmedallist(cer.routeId,cer.routeName)">{{
            cer.routeName
          }}</el-button>
        </el-card>
        <div class="clearfix"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "Certificate",
  props: ["certificates"],
  data() {
    return {
      Certificates: {
        gold: [
          {
            routeId: 2,
            routeName: "路径名称1",
            certificateImage: require("@/assets/testzs1.png"),
            srcList: [require("@/assets/testzs1.png")],
          },
          {
            routeId: 2,
            routeName: "路径名称1",
            certificateImage: require("@/assets/testzs1.png"),
            srcList: [require("@/assets/testzs1.png")],
          },
        ],
        silver: [
          {
            routeId: 2,
            routeName: "路径名称1",
            certificateImage: require("@/assets/testzs1.png"),
            srcList: [require("@/assets/testzs1.png")],
          },
          {
            routeId: 2,
            routeName: "路径名称1",
            certificateImage: require("@/assets/testzs1.png"),
            srcList: [require("@/assets/testzs1.png")],
          },
        ],
        copper: [
          {
            routeId: 2,
            routeName: "路径名称1",
            certificateImage: require("@/assets/testzs1.png"),
            srcList: [require("@/assets/testzs1.png")],
          },
          {
            routeId: 2,
            routeName: "路径名称1",
            certificateImage: require("@/assets/testzs1.png"),
            srcList: [require("@/assets/testzs1.png")],
          },
        ],
      },
    };
  },
  methods: {
    /*根据routeId，获取到该条路径下所获得的所有课程勋章*/
    getmedallist(routeId,routeName) {
      this.$router.push({
        // path: "/routeDetailInfo/routeDetialInfo",
        name: "routeDetialInfo",
        query: {
          val: routeId,
          routeName:routeName
        },
      });
    },
  },
};
</script>

<style scoped>
@import "../../../styles/common.css";

.el-card ::v-deep .el-card__body {
  display: block;
  margin: 0 auto;
}
</style>
